<template>
  <!-- 路由出口，渲染当前路由对应的页面组件 -->
  <router-view></router-view>
</template>

<script setup>
// 引入 vueuse 的暗黑模式相关方法
import { useDark, useToggle } from '@vueuse/core'
// 引入自定义的样式存储（Pinia 或其他状态管理）
import { useStyleStore } from './store/UseStyleStore'
// 引入生命周期钩子
import { onMounted } from 'vue'

// 获取样式存储实例
const styleStore = useStyleStore()  // 使用样式存储

// 响应式检测当前是否为深色模式
const isDark = useDark()  // 检测当前是否为深色模式
// 切换深色/浅色模式的方法
const toggleDark = useToggle(isDark)  // 用于切换深色和浅色模式

// 组件挂载时，根据存储的状态初始化深色模式
onMounted(() => {
  toggleDark(styleStore.isDark)  // 初始化时根据存储的状态设置深色模式
})
</script>